<template>
	<b-layout-index bg-color="#3C3E50">
		<navbar :title="$t('会员中心')" :isStyle="light"></navbar>
		<view class="pd-10">
			<view class="bg-active mg-top-10  br-rd-10">
				<u-cell :border="false">
					<view slot="title" class="text-center text-indent">
						<u--text :bold="true" size="14" :text="userInfo.name"></u--text>
					</view>
					<view slot="icon">
						<image class="avatar" randomBgColor :random-bg-color="true" :src="userInfo.avatar">
						</image>
					</view>
					<view slot="value" class="text-center">
						<u-tag plain type="mini" shape="circle" bg-color="#000" color="#fff" border-color="#000"
							:text="isUg?userInfo.agent.nameUg:userInfo.agent.name"></u-tag>
					</view>
				<!-- 	<view slot="label" class=" mg-5 text-indent">
						<view class="info">{{$t("时间")}}:2012-12-14</view>


					</view> -->

				</u-cell>
				<view class="mg-top-5 mg-bottom-10 ">
					<u-grid :border="false" col="3">
						<u-grid-item v-for="(item,index) in headerFilter">
							<text class="  font-size-14 font-bold" :class="item.clss">{{myInfo[item.key]}}</text>
							<text class=" font-size-12">{{$t(item.name)}}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view v-if="datalist.length>0 && userInfo.parentUser.id>0">
				<view class="mg-top-10 mg-bottom-10  br-rd-10">
					<u-cell :border="false">
						<view slot="title">
							<u--text :bold="true" color="#F3D19E" size="16" :text="$t('申请成为经销商')"></u--text>
						</view>

						<view slot="label" class="pd-top-10">
							<u--text size="12" color="#F3D19E" :text="$t('请把你的代理级别再提高一级')"></u--text>
						</view>
					</u-cell>
				</view>
				<view class="mg-top-20  br-rd-10" :class="selectedItem.id==item.id?'bg-active':'bg-item'"
					v-for="(item,index) in datalist">
					<u-cell :border="false" @click="itemSelected(item)">
						<view slot="title" class="text-indent">
							{{item.name}}
						</view>
						<!-- <iconfont slot="icon" icon="icon-huiyuan" :size="32" /> -->
						<image class="iconLogo" slot="icon" :src="item.url" mode="widthFix"></image>
						<view slot="value" class="text-center text-indent">
							<u--text :bold="true" size="16" mode="price" :text="(item.price)"></u--text>
							<view class="textline text-indent">
								<u--text :block="true" decoration="line-through" color="#6B7280" :bold="true" size="12"
									mode="price" :text="(item.price)"></u--text>
							</view>

						</view>
						<!-- 		<view slot="label">
						<u--text size="12" text="--"></u--text>
					</view> -->
					</u-cell>
				</view>
				<view class="text-center mg-top-20 mg-bottom-10">
					<text class="font-size-12 active">
						{{$t("代理人升级的规则及须知")}}
					</text>
				</view>

				<view class="text-center mg-top-20 mg-bottom-10 submit bg-active " @click="sendUrl">
					<text class="font-size-14 ">
						{{$t('升级')}}
					</text>
				</view>

				<view class="text-center mg-top-20 mg-bottom-10">
					<text class="font-size-12 info">
						{{$t("代理人升级的规则及须知")}}
					</text>
				</view>

				<view class="mg-top-10 mg-bottom-10  br-rd-10">
					<u-cell :border="false">
						<view slot="title">
							<u--text :bold="true" color="#F3D19E" size="16" :text="$t('代理权限')"></u--text>
						</view>
					</u-cell>
					<u-cell :border="false">
						<view slot="title" class="text-indent">
							<u--text color="#F3D19E" size="14" :text="$t('海报下载')"></u--text>
						</view>
						<view slot="icon" class="br-icon-item pd-10 br-rd-10 text-center">
							<iconfont color="#F3D19E" size="30" icon="icon-yaoqingxin" />
						</view>
						<view slot="label" class="text-indent">
							<text class="font-size-12 info">
								{{$t("每日下载不限量")}}
							</text>
						</view>
					</u-cell>
				</view>
			</view>
			<view v-else>

				<view class="error-info">
					<image class="img" mode="widthFix" :src="userInfo.agent.url" />
					<view class="title active font-size-24 mg-top-10">{{isUg?userInfo.agent.nameUg:userInfo.agent.name}}
					</view>
					<view class="info">
						{{$t("你的等级是最高等级,不能比这更高的运行")}}
					</view>
				</view>
			</view>

		</view>
	</b-layout-index>
</template>

<script>
	import {
		findByOrderInfo
	} from '../../../../api/order';
	import {
		findByInfo
	} from '../../../../api/userWallet';
	import {
		getFindByList
	} from '@/api/agent.js'
	export default {
		data() {
			return {
				datalist: [],
				upgrade: 0,
				selectedItem: {
					id: 0
				},
				headerFilter: [{
						name: "订单",
						key: "order"
					},
					{
						name: "金额",
						key: "balance",
						clss: "priceA"
					},
					{
						name: "积分",
						key: "integral"

					}
				],
				myInfo: {
					order: 0,
					orderCloud: 0,
					balance: 0,
					integral: 0,
					servisefee: 0,
					taxes: 0,
					withdrawal: 0,
					withdrawalWaits: 0
				},
			}
		},
		onLoad: function({
			isReg = false,
			upgrade = 0
		}) {
			console.log("UUUUUUUUUUU:" + isReg)
			this.upgrade = upgrade;
			this.getInfo();
			this.getData(isReg, upgrade)
		},
		methods: {
			getData: function(isReg = false, upgrade = 0) {
				var the = this
				getFindByList(isReg, upgrade).then(res => {
					the.datalist = res
				})
			},
			itemSelected: function(item) {
				this.selectedItem = item;
			},
			sendUrl: function() {
				var item = this.selectedItem
				console.log(item)
				if (item.id > 0) {
					var url = "shoppinglist?name=" + item.name + "&cloudType=0&price=" + item.price +
						"&agentId=" + item.id + "&upgrade=" + this.upgrade;
					uni.navigateTo({
						url: url //"./upgradeselected?level=" + item.level + "&name=" + item.name + "&id=" + item.id + "&price=" + item.price + "&upgrade=" + this.upgrade 
					})

				} else {
					uni.$u.toast(this.$t('选择代理类'))
				}
			},
			getInfo: function() {
				var info = this.myInfo;
				findByInfo().then(res => {
					var i = Object.assign(info, res)
					this.myInfo = i
					//	uni.setStorageSync("userWalletFindByInfo",res)
				})

				findByOrderInfo().then(res => {
					var i = Object.assign(info, res)
					this.myInfo = i
					//	uni.setStorageSync("userWalletFindByInfo",res)
				})

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #2B2C35 !important;
	}

	.bg-active {
		background-color: #F3D19E;
	}

	.active {
		color: #F3D19E;
	}

	.bg-item {
		background-color: #FFFFFF;
	}

	.textline {
		text-decoration: line-through !important;

	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 4px #FFFFFF solid;

	}

	.info {
		font-size: 12px;
		color: #6B7280;
	}

	.text-indent {
		text-indent: 10px !important;
	}

	.submit {
		padding: 10px;
		border-radius: 6px;
		height: 35px;
		line-height: 30px;
	}

	.br-icon-item {
		background-color: #2B2C35;
		height: 30px;
		width: 30px;
	}

	.iconLogo {
		width: 80upx;
		height: 80upx;
	}

	.error-info {
		padding: 30px;
		text-align: center;

		.img {
			width: 50%;

		}
	}
</style>